import React from 'react'

const myContext=React.createContext()
const {Consumer,Provider} =myContext
export default function A() {
  const [count]=React.useState(0)
  return (
    <Provider value={{params:count,username:'jack'}}>
      <h1>组件A</h1>
      {/* 父组件将返回C组件的回调通过props传给B组件 */}
      <B render={(name)=><C name={name}/>}></B>
      <Fn a={1}/>
    </Provider>
  )
}

class B extends React.Component {
  //类式组件声明接收context
  static contextType=myContext
  render() {
    console.log('类式组件B接收到的参数'+JSON.stringify(this.context) );
    return (
      <>
        <h1>组件B</h1>
        {/* 子组件调用 */}
        {this.props.render({name:'jack'})}
      </>
    )
  }
}

function Fn(props) {
  return (
    <div>
      <h1>函数组件：从父组件接收到的参数为：{props.a}</h1>
      {/* <C/> */}
    </div>
  )
}

function C(props){
  console.log(props);
  return (
    <Consumer>
      {
        value=>{
          console.log('爷孙组件利用Context传值'+JSON.stringify(value));
          return (
            <>
              <h1>组件C</h1>
              <h2>{value.username}+++++{value.params}</h2>
            </>
            
          )
        }
      }
    </Consumer>
  )
}
